<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

</head>
<body>
    <div id="app">
        <h2>{{msg}}</h2>
        <p><input type="text" v-model="msg" ></p>
        <myhead></myhead>
        <hr>
        <parent
            title="天道酬勤"
            index="2107"
            v-bind:msg="msg"
            :flag="flag"
        ></parent>
        
        <hr>

        <myfoot></myfoot>
    </div>

    <template id="foot">
        <div>
            <h2>Foot - Foot - Foot </h2>
        </div>
    </template>

    <template id="parent">
        <div>
            <h2>parent - 父组件 </h2>
            <h4>
                props --- {{msg}} - {{title}} - {{index}}  -- {{flag}}
            </h4>
            <childone
                prop-a="daydayup"
                :prop-b="address"
                :prop-c="area"
                :prop-d="city"
                :toggle="toggle"
                :num="num"
            ></childone>
        </div>
    </template>

    <template id="childone">
        <div>
            <h3>childone  - 1 - 子组件  </h3>
            <hr>
            <p>
                propA ---- {{propA}}
            </p>
            <p>
                propB ---- {{propB}}
            </p>
            <p>
                propC -- {{propC}}
            </p>
            <p>
                propD---{{propD}}
            </p>
            <p>
                toggle -- {{toggle}}
            </p>
            <p>
                num --- {{num}}
            </p>
        </div>
    </template>

    <script>
        Vue.component("myhead",{
            template:"<header>Head - wh2107-daydayup </header>"
        })

        Vue.component("myfoot",{
            template:"#foot",
            mounted(){},
            methods:{}
        })

        Vue.component("parent",{
            template:"#parent",
            data(){
                return {
                    address:"金融港",
                    area:"江夏区",
                    city:"武汉是",
                    toggle:false,
                    num:1000
                }
            },
            props:['title','index', 'msg' , 'flag' ],  // this.title 
        })
        Vue.component("childone",{
            template:"#childone",
            props:{
                propA:String,
                propB:[String,Number],
                propC:{
                    default:'东湖高新区',
                    type:String 
                },
                propD:{
                    type:[String,Boolean],
                    required:true
                },
                toggle:{
                    type:Boolean,
                },
                num:{
                    type:[Number,Object],
                    default:()=>{
                        return 30000
                    }
                }
            }
        })

        const vm = new Vue({
            // el:"#app",
            data:{
                msg:"组件的参数 props",
                flag:true 
            },
            mounted(){
                document.getElementsByTagName("title")[0].innerHTML = this.msg 
            }
        }).$mount("#app")
    </script>
    <!-- 
        <A>
            <B></B>
        </A>
        props  组件接受的外部数据  

        通过 Prop 向子组件传递数据  单向数据流   

        props 属性   用来传递(父组件传给子组件)组件的参数 (动态&静态)   v-bind
        props 只能用来传递数据  不可以修改   
        动态props v-bind 
        静态props 没有 v-bind 

        props 驼峰命名   user-name="zuozuomu"

        props 校验  格式类型
        String    
        Number
        Boolean
        Array
        Object
        Date
        Function
        Symbol  符号
     -->
</body>
</html>